<template>
  <div class="pie-chart" :style="{width: width, height: height}"></div>
</template>
<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons')
  export default {
    name: 'PreChart',
    props: {
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '333px'
      }
    },
    data () {
      return {
        chart: null
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    methods: {
      initChart(){
        this.chart = echarts.init(this.$el)

        let option = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['路灯', '卫生', '草坪', '栅栏', '车位'],
            textStyle: {
              color: '#fff'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          // toolbox: {
          //   feature: {
          //     saveAsImage: {},
          //   }
          // },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月', '9月', '10月', '11月','12月'],
            axisLabel: {
              color: '#fff'
            },
            axisLine: {
              show: true,
              lineStyle:{
                color: '#fff'
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              color: '#fff'
            },
            axisLine: {
              show: true,
              lineStyle:{
                color: '#fff'
              }
            }
          },
          series: [
            {
              name: '路灯',
              type: 'line',
              stack: 'Total',
              data: [120, 132, 101, 134, 90, 230, 210],
              itemStyle: {
                color: '#fe8702',
              },
              symbol: 'circle'
            },
            {
              name: '卫生',
              type: 'line',
              stack: 'Total',
              data: [220, 182, 191, 234, 290, 330, 310],
              itemStyle: {
                color: '#f8c800',
              },
              symbol: 'circle'
            },
            {
              name: '草坪',
              type: 'line',
              stack: 'Total',
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              itemStyle: {
                lineStyle:{                 
                  color: '#fed61',
                  width:1,  // 设置虚线宽度
                  type:'solid'  // 虚线'dotted' 实线'solid'
                }
              },
              symbol: 'circle'
            },
            {
              name: '栅栏',
              type: 'line',
              stack: 'Total',
              data: [150, 232, 201, 154, 190, 330, 410],
              itemStyle: {
                color: '#01E275',
              },
              symbol: 'circle'
            },
            {
              name: '车位',
              type: 'line',
              stack: 'Total',
              data: [320, 332, 301, 334, 390, 330, 320],
              itemStyle: {
                color: '#0695F5',
              },
              symbol: 'circle'
            }
          ],
          // color: ['#fe8702','#f8c800','#fed61', '#01E275','#0695F5'] // 三个折线的颜色
        }
        this.chart.setOption(option)
      }
    }
  }
</script>